<template>
  <div v-title="'班线售票明细 - 世外票务云平台'">
    <mk-breadcrumb :is-return="true" :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-fixedHeightSmall)+'px'}]">
    <div class="ticket-item-detail PublicListStyle">
      <div class="gray_bg">
        <mk-permission :perms="['Ticket:TicketManagement:BusLineDetail:export']">
          <div class="marginBottom-20 textAlignRight">
          <a class="export-btn" target="_blank"
             :href="'/order/ticketing/detail/export.xls?scheduleRecordId=' + searchCondition.id">导出</a>
          </div>
        </mk-permission>

        <div class="ticket-card">
          <el-row class="station-info">
            <el-col :span="8" class="station-name">{{ headerInfo.startSite }}</el-col>
            <el-col :span="8">
              <div class="detail-info">
                &nbsp;
                <mk-ticket-arrow class="ticket-arrow"></mk-ticket-arrow>
              </div>
            </el-col>
            <el-col :span="8" class="station-name">{{ headerInfo.endSite }}</el-col>
          </el-row>
          <div class="other-info">
            <el-row :gutter="20" v-if="headerInfo.mindWaySite">
              <el-col :span="2">途径站</el-col>
              <el-col :span="22">{{ headerInfo.mindWaySite }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="2">发车时间</el-col>
              <el-col :span="22">{{ headerInfo.rideTime | formatMinutes }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="2">相关车辆</el-col>
              <el-col :span="22">{{ headerInfo.bus }}</el-col>
            </el-row>
          </div>
        </div>

        <div v-loading="isLoading" element-loading-text="拼命加载中">
          <el-table :data="tableData.elements">
            <el-table-column label="购票人姓名" prop="buyer"></el-table-column>
            <el-table-column label="电话" prop="phone"></el-table-column>
            <el-table-column label="乘车车站" prop="startSite"></el-table-column>
            <el-table-column label="到达车站" prop="endSite"></el-table-column>
            <el-table-column label="有效购票数量（张）" prop="count"></el-table-column>
            <el-table-column label="状态" prop="status">
              <template slot-scope="scope">
                {{ scope.row.status | formatStatus }}
              </template>
            </el-table-column>
          </el-table>

          <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                         :current-page="tableData.page" :page-size="tableData.size"
                         :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                         @current-change="loadList"></el-pagination>
        </div>
      </div>
    </div>
    </el-scrollbar>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../../components/MkBreadcrumb.vue'
  import { mapState } from 'vuex'
  import MkTicketArrow from '../../../components/ticketArrow.vue'
  import ticketService from '../../../services/ticket'
  import MkPermission from "../../../components/MkPermission"

  export default {
    name: 'MkTicketItemDetail',

    components: {
      MkBreadcrumb, MkTicketArrow, MkPermission
    },
    computed:mapState({
      bodyHeight:state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    methods: {
      loadList (pageValue) {
        this.isLoading = true;
        if (pageValue) {
          this.searchCondition['page.pn'] = pageValue;
        }
        ticketService.loadTicketItemListServer(this.searchCondition, data => {
          this.tableData = data.data;
          this.isLoading = false;
        });
      }
    },

    mounted: function() {
      this.searchCondition.id = this.$route.params.id;

      ticketService.loadTicketItemInfoServer ({
        id: this.$route.params.id
      }, data => {
        this.headerInfo = data.data;
      });

      this.loadList(1);
    },

    data () {
      return {
        beforeGetFocus: true,
        isLoading: false,
        formDialogVisible: true,
        headerInfo: {},
        tableData: {},
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          id: '',
        },
        breadcrumbData: {
          list: {
            first: {name:'票务管理',path: null, isClickAble: false},
            second: {name: '班线售票明细',path: '/saleDetailForTicket', isClickAble: true},
            third: {name: '班线详情',path: null, isClickAble: false},
          },
          menuIconStyle : 'ticketIconStyle'
        },
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      },
      formatStatus (value) {
        if (value === 'Wait_Check') {
          return '待验票';
        } else if (value === 'Checked') {
          return '已验票';
        } else if (value === 'WaitPay') {
          return '待支付';
        } else if (value === 'Refund') {
          return '已退票';
        } else {
          return '已关闭';
        }
      }
    }
  }
</script>

<style lang='less'>
  @import '../../../assets/style/main.less';
  .ticket-item-detail {
    .ticket-card {
      background-color: #fff;
      padding: 0 10px 40px 10px;
      .other-info {
        font-size: 14px;
        .el-col:first-child {
          width: 80px;
          color: @fontColorTwo;
        }
      }
    }
    .ticket-card {
      padding: 30px;
      background-color: @borderColor;
      .station-info .el-col {
        width: auto;
        max-width: 33.3333%;
      }
      .station-name {
        padding-top: 10px;
        font-size: 24px;
        color: @fontColorOne;
      }
      .detail-info {
        min-width: 122px;
        text-align: center;
        position: relative;
        line-height: 28px;
        font-size: 14px;
        color: @fontColorTwo;
      }
      .ticket-arrow {
        position: absolute;
        left: 10px;
        top: 20px;
      }
      .other-info {
        padding-top: 30px;
        .el-row + .el-row {
          padding-top: 10px;
        }
        .el-col:first-child {
          text-align: right;
        }
        .el-col:last-child {
          color: @fontColorOne;
        }
      }
    }
    .gray_bg {
      padding: 30px 30px 0 30px;
      background-color: #fff;
      position: relative;
    }
  }
</style>
